<style lang="less" scoped>
  .indicators-average-time{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
      overflow: hidden;
    }
    .no-data{
      color: #fff;
      width: 100%;
      font-size: 14px;
      height: calc(100% - 45px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>

<template>
  <div class="indicators-average-time">
    <div class="indicators-average-time_title">
      <span>本月不同指标的平均时间</span>
    </div>
    <div class="indicators-average-time_content">
      <el-row v-if="isShow" style="width: 100%; height: 100%;">
        <el-col v-for="(item, index) in differTime" :key="index" :span="4" :style="{width: isStrock == 'chestPain' ? '' : '20%', height: '100%'}">
          <div :id="item.id" style="height: 90%;" />
          <div style="text-align: center; color: #fff;">{{ item.name }}</div>
        </el-col>
      </el-row>
      <div v-else class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
import { getQuotaAvgThisMonth, getStrokeQuotaAvgThisMonth } from '@/api/comprehensive/indicatorsAverageTime'
import * as echarts from 'echarts'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      isShow: true,
      differTime: [{
        name: 'FMC2ECG时间',
        id: 'fmc2'
      }, {
        name: '首份心电图至确认时间',
        id: 'firstecg'
      }, {
        name: '肌钙蛋白抽血到获取报告时间',
        id: 'troponin'
      }, {
        name: 'NSTEMI/STEMI/UA确诊到双抗时间',
        id: 'stemi'
      }, {
        name: '导管室激活时间',
        id: 'international'
      }, {
        name: '入门到导丝通过时间',
        id: 'intoHospital'
      }],
      idList: ['fmc2', 'firstecg', 'troponin', 'stemi', 'international', 'intoHospital'],
      interVal: null
    }
  },
  watch: {
    'isStrock'() {
      this.init()
    }
  },
  mounted() {
    this.init()
    this.interVal = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.interVal)
  },
  methods: {
    init() {
      this.isShow = true
      if (this.isStrock == 'chestPain') {
        this.idList = ['fmc2', 'firstecg', 'troponin', 'stemi', 'international', 'intoHospital']
        this.differTime = [{
          name: 'FMC2ECG时间',
          id: 'fmc2'
        }, {
          name: '首份心电图至确认时间',
          id: 'firstecg'
        }, {
          name: '肌钙蛋白抽血到获取报告时间',
          id: 'troponin'
        }, {
          name: 'NSTEMI/STEMI/UA确诊到双抗时间',
          id: 'stemi'
        }, {
          name: '导管室激活时间',
          id: 'international'
        }, {
          name: '入门到导丝通过时间',
          id: 'intoHospital'
        }]
        getQuotaAvgThisMonth({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              this.isShow = true
              res.data.forEach((el, index) => {
                const chartId = this.idList[index]
                const myChart = echarts.init(document.getElementById(chartId))
                window.addEventListener('resize', myChart.resize)
                const option = {
                  grid: {
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0
                  },
                  series: [
                    {
                      type: 'gauge',
                      center: ['50%', '50%'],
                      radius: '100%',
                      axisLine: {
                        lineStyle: {
                          width: 15,
                          color: [
                            [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                              offset: 0.1,
                              color: '#008CFF'
                            }, {
                              offset: 0.8,
                              color: '#1CD1A1'
                            }])]
                          ]
                        }
                      },
                      pointer: {
                        itemStyle: {
                          color: '#fff'
                        }
                      },
                      splitLine: {
                        distance: -30,
                        length: 15,
                        lineStyle: {
                          color: '#0009F0',
                          width: 4
                        }
                      },
                      axisTick: {
                        show: false,
                        distance: 30,
                        length: 25,
                        lineStyle: {
                          color: '#3A9FFF',
                          width: 1
                        }
                      },
                      axisLabel: {
                        color: '#fff',
                        distance: 10,
                        fontSize: 12
                      },
                      detail: {
                        valueAnimation: true,
                        lineHeight: 40,
                        width: 10,
                        overflow: 'break',
                        formatter: '{value}分钟',
                        color: '#fff'
                      },
                      data: [{
                        value: el.quotaAvgVal
                      }]
                    }
                  ]
                }
                myChart.setOption(option)
              })
            } else {
              this.isShow = false
            }
          }
        })
      } else if (this.isStrock == 'stroke') {
        this.idList = ['firstecg', 'troponin', 'stemi', 'international', 'intoHospital']
        this.differTime = [{
          name: '检验出结果时间',
          id: 'firstecg'
        }, {
          name: '到院到完成CT检查时间',
          id: 'troponin'
        }, {
          name: '急诊室到导管室时间',
          id: 'stemi'
        }, {
          name: 'CT室到病房时间',
          id: 'international'
        }, {
          name: '入院到住院时间',
          id: 'intoHospital'
        }]
        getStrokeQuotaAvgThisMonth({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              this.isShow = true
              res.data.forEach((el, index) => {
                const chartId = this.idList[index]
                const myChart = echarts.init(document.getElementById(chartId))
                window.addEventListener('resize', myChart.resize)
                const option = {
                  grid: {
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0
                  },
                  series: [
                    {
                      type: 'gauge',
                      center: ['50%', '50%'],
                      radius: '100%',
                      axisLine: {
                        lineStyle: {
                          width: 15,
                          color: [
                            [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                              offset: 0.1,
                              color: '#008CFF'
                            }, {
                              offset: 0.8,
                              color: '#1CD1A1'
                            }])]
                          ]
                        }
                      },
                      pointer: {
                        itemStyle: {
                          color: '#fff'
                        }
                      },
                      splitLine: {
                        distance: -30,
                        length: 15,
                        lineStyle: {
                          color: '#0009F0',
                          width: 4
                        }
                      },
                      axisTick: {
                        show: false,
                        distance: 30,
                        length: 25,
                        lineStyle: {
                          color: '#3A9FFF',
                          width: 1
                        }
                      },
                      axisLabel: {
                        color: '#fff',
                        distance: 10,
                        fontSize: 12
                      },
                      detail: {
                        valueAnimation: true,
                        lineHeight: 40,
                        width: 10,
                        overflow: 'break',
                        formatter: '{value}分钟',
                        color: '#fff'
                      },
                      data: [{
                        value: el.quotaAvgVal
                      }]
                    }
                  ]
                }
                myChart.setOption(option)
              })
            } else {
              this.isShow = false
            }
          }
        })
      }
    }
  }
}
</script>
